<script setup>
import Header from "../components/Header.vue";
import data from '../api/data'
import user from "../api/user.js";
import {ElMessage} from "element-plus";
import {watch} from "vue";
import {useStore} from "vuex";
import {Delete} from "@element-plus/icons-vue";

const store = useStore()

data.user_id = store.state.user.user_id
const all_articles = () => {
  data.all_articles().then(res => {
    data.article_data = res.data.results
    console.log(res.data.results)
  })
}

// 头像加载失败
const errorAvatar = (avatar) => {
  data.user_avatar = false
}
all_articles()

// 文章图片加载失败
const errorArticleImg = () => {
  data.article_img = false
}

// 点赞
const addLove = async (id) => {
  if (data.add_collect === 1) {
    data.current_article_love = id
  } else {
    data.current_article_love = 0
  }
  // if (data.add_love === -1 && data.current_article_love === id) {
  //   data.add_love = 1
  //   data.current_article_love = id
  // } else if (data.add_love === 1 && data.current_article_love === id) {
  //   data.current_article_love = 0
  //   data.add_love = -1
  // }
  await data.add_some(id, data.add_love).then(res => {
    // ElMessage.success('点赞成功')
  }).catch(err => {
    ElMessage.error(`${err?.response?.data?.error || '服务器错误，请稍后再试'}`)
    data.current_article_love = parseInt(err?.response?.data?.id)
  })
  await all_articles()
}

// 收藏
const addCollect = async (id) => {
  if (data.add_collect === 1) {
    data.current_article_collect = id
  } else {
    data.current_article_collect = 0
  }

  // if (data.add_collect === -1 && data.current_article_collect === id) {
  //   data.add_collect = 1
  // } else if (data.add_collect === 1 && data.current_article_collect === id) {
  //   data.add_collect = -1
  // }
  await data.add_some_collect(id, data.add_collect).then(res => {
    // ElMessage.success('收藏成功')
  }).catch(err => {
    ElMessage.error(`${err?.response?.data?.error || '服务器错误，请稍后再试'}`)
    data.current_article_collect = parseInt(err?.response?.data?.id)
  })
  await all_articles()
}

// 获取评论
const getComment = () => {
  data.get_comments(data.article_id).then(res => {
    data.comment_list = res.data
  })
}

// 显示评论
const showComment = (article) => {
  // 评论数量
  data.comments = article.comments
  data.article_id = article.id
  data.comment_is_show = article.is_show
  data.commentDialogVisible = true
  getComment()
}

watch(() => data.ordering, () => {
  all_articles()
})

// 点击放大文章图片
const show_img = (image) => {
  data.article_img_big = true
  data.article_img_url = image
}

// 增加评论
const add_comment = () => {
  data.add_comment(store.state.user.user_id).then(res => {
    ElMessage.success('评论成功')
    data.your_comment = ''
    //   重新获取评论
    getComment()
    all_articles()

  }).catch(err => {
    ElMessage.error('服务器错误，请稍后再试')
  })
}


// 删除评论
const delete_comment = (id) => {
  data.delete_comment(id).then(res => {
    ElMessage.success('删除成功')
    //   重新获取评论
    getComment()
    all_articles()
  }).catch(err => {
    ElMessage.error('服务器错误，请稍后再试')
  })
}

//显示二级评论
const showSecondComment = (comment) => {
  data.first_comment_id = comment.id
  data.second_comment_is_show = true
}

// 增加二级评论
const add_second_comment = () => {
  console.log(data.first_comment_id)
  data.add_second_comment(store.state.user.user_id).then(res => {
    ElMessage.success('评论成功')
    data.second_comment_content = ''
    //   重新获取评论
    getComment()
    all_articles()

  }).catch(err => {
    ElMessage.error('服务器错误，请稍后再试')
  })
}

</script>

<template>
  <link rel="stylesheet" href="../../iconfont.css">
  <link rel="stylesheet" href="../../icon/collect/iconfont.css">
  <link rel="stylesheet" href="../../icon/change/iconfont.css">
  <link rel="stylesheet" href="../../icon/comment/iconfont.css">
  <Header/>
  <div class="wrapper" style="padding: 20px;">
    <el-card style="max-width: 100%;max-height: 100%;">
      <div class="filter">
        <a href="" :class="{on:data.ordering==='-create_time'}"
           @click.prevent.stop="data.ordering=(data.ordering==='-create_time'?'':'-create_time')">最新</a>
        <a href="" :class="{on:data.ordering==='-add_love'}"
           @click.prevent.stop="data.ordering=(data.ordering==='-add_love'?'add_love':'-add_love')">点赞量</a>
      </div>
      <el-card class="user_card" v-for="article in data.article_data">
        <div class="user_info" v-if="article.is_show">
          <el-image class="avatar" :src="article.user.avatar" v-if="data.user_avatar" @error="errorAvatar"/>
          <el-image class="avatar" :src="'http://api.leleapi.cn:8000/uploads/'+article.user.avatar.split('uploads/')[1]"
                    v-else/>
          <div class="info">
            <span class="nickname">{{ article.user.nickname }}</span>
            <p class="content">{{ article.user.signature }}</p>
            <p class="time">{{ article.create_time }}</p>
          </div>
        </div>
        <div class="user_info" v-else>
          <el-image class="avatar" src="/src/assets/imgs/img.png"/>
          <div class="info">
            <span class="nickname">匿名</span>
            <p class="content">今天天气不错，可是我匿名不好意思说。</p>
            <p class="time">{{ article.create_time }}</p>
          </div>
        </div>
        <template #footer>
          <div style="font-size: 17px">{{ article.content }}</div>
          <span style="margin-right:10px;" v-for="image in article.article_imgs.split(',')">
            <el-image @click="show_img(`http://luffycityzhang.oss-cn-fuzhou.aliyuncs.com/uploads/${image}`)"
                      style="height:100px;" :src="`http://luffycityzhang.oss-cn-fuzhou.aliyuncs.com/uploads/${image}`"
                      v-if="data.article_img" @error="errorArticleImg"/>
            <el-image @click="show_img(`http://api.leleapi.cn:8000/uploads/${image}`)" style="height:100px;"
                      :src="`http://api.leleapi.cn:8000/uploads/${image}`" v-else/>
          </span>
          <div>
            <span @click="addLove(article.id)"> <el-badge :value="article.add_love" class="item aixin"
                                                          badge-style="font-size:10px;">
              <span class="iconfont icon-aixin"
                    :class="{onaixin:data.current_article_love===article.id}"></span></el-badge></span>
            <el-badge @click="addCollect(article.id)" :value="article.add_collect" class="item aixin"
                      badge-style="font-size:10px">
              <span class="iconfont icon-shoucang"
                    :class="{oncollect:data.current_article_collect===article.id}"></span></el-badge>
            <el-badge @click="showComment(article)" :value="article.comments" class="item pinglun"
                      badge-style="font-size:10px">
              <span class="iconfont icon-pinglun"></span></el-badge>
          </div>
        </template>
      </el-card>
      <template #footer>Footer content</template>
    </el-card>
    <el-dialog
        v-model="data.commentDialogVisible"
        :title="data.comments+'条评论'"
        width="500"
        style="height: auto"
        align-center
    >
      <div v-for="comment in data.comment_list">
        <div class="user_info" v-if="comment.user.is_show">
          <el-image class="avatar" :src="comment.user.avatar" v-if="data.user_avatar" @error="errorAvatar"/>
          <el-image class="avatar" :src="'http://api.leleapi.cn:8000/uploads/'+comment.user.avatar.split('uploads/')[1]"
                    v-else/>
          <div class="info">
            <span class="nickname comment_nickname">{{ comment.user.nickname }}</span>
            <div class="content" @click="showSecondComment(comment)">{{ comment.content }}
              <span @click="delete_comment(comment.id)" v-if="comment.user.id === store.state.user.user_id"
                  style="margin-left:20px">
                <el-icon size="20"><Delete/></el-icon></span>
            </div>
            <p class="time comment_time">{{ comment.create_time }}</p>
          </div>
        </div>
        <div class="user_info" v-else>
          <el-image class="avatar" src="/src/assets/imgs/img.png"/>
          <div class="info">
            <span class="nickname comment_nickname">匿名</span>
            <div @click="showSecondComment(comment)" class="content">{{ comment.content }}
              <span @click="delete_comment(comment.id)" v-if="comment.user.id === store.state.user.user_id"
                    style="margin-left:20px">
                <el-icon size="20"><Delete/></el-icon></span>
            </div>
            <p class="time comment_time">{{ comment.create_time }}</p>
          </div>
        </div>
        <!--        二级评论 -->
        <div v-for="child_comment in comment.child_comment">
          <div class="user_info" v-if="child_comment.user.is_show">
            <el-image class="avatar" :src="child_comment.user.avatar" v-if="data.user_avatar" @error="errorAvatar"/>
            <el-image class="avatar"
                      :src="'http://api.leleapi.cn:8000/uploads/'+child_comment.user.avatar.split('uploads/')[1]"
                      v-else/>
            <div class="info">
              <span class="nickname comment_nickname">{{ child_comment.user.nickname }}</span>
              <div class="content" @click="showSecondComment(comment)">回复
                <span class="second_comment_nickname" v-if="comment.user.is_show">{{ comment.user.nickname }}</span>
                <span class="second_comment_nickname" v-else>匿名</span>
                ：{{ child_comment.content }}
                <span @click="delete_comment(child_comment.id)" v-if="child_comment.user.id === store.state.user.user_id"
                    style="margin-left:20px">
                <el-icon size="20"><Delete/></el-icon></span>
                </div>
              <p class="time comment_time">{{ child_comment.create_time }}</p>
            </div>
          </div>
          <div class="user_info" v-else>
            <el-image class="avatar" src="/src/assets/imgs/img.png"/>
            <div class="info">
              <span class="nickname comment_nickname">匿名</span>
              <div @click="showSecondComment(comment)" class="content">
                回复
                <span class="second_comment_nickname" v-if="comment.user.is_show">{{ comment.user.nickname }}: </span>
                <span class="second_comment_nickname" v-else>匿名: </span>
                {{ child_comment.content }}
                <span @click="delete_comment(child_comment.id)" v-if="child_comment.user.id === store.state.user.user_id"
                     style="margin-left:20px" >
                <el-icon size="20"><Delete/></el-icon></span>
              </div>
              <p class="time comment_time">{{ child_comment.create_time }}</p>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-input class="mycomment" v-model="data.your_comment" rows="4" placeholder="请输入评论内容"
                    :autosize="{ minRows: 2, maxRows: 4 }" min="1" max="1000"
                    type="textarea"/>
          <el-button type="info" @click="data.commentDialogVisible = false">
            取消
          </el-button>
          <el-button type="primary" @click="add_comment">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
  <el-dialog v-model="data.article_img_big">
    <el-image :src="data.article_img_url" alt="Preview Image"/>
  </el-dialog>
  <el-dialog
      v-model="data.second_comment_is_show"
      title="回复评论"
      width="500"
      draggable
      overflow
  >
    <el-input v-model="data.second_comment_content" placeholder="请输入回复内容"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="data.second_comment_is_show = false">取消</el-button>
        <el-button type="primary" @click="add_second_comment">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.filter {
  height: 30px;
  width: 100%;
  margin-bottom: 10px;
}

.filter .on {
  color: #fff;
  background-color: #545c63;
}

.filter a {
  display: inline-block;
  float: left;
  font-size: 12px;
  color: #545c63;
  line-height: 16px;
  padding: 4px 12px;
  border-radius: 100px;
  margin-right: 12px
}

.user_card {
  margin-bottom: 10px;
  width: 100%;
}

.user_info .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.info {
  display: inline-block;
  margin-left: 25px;
}

.nickname {
  font-weight: bold;
  font-size: 15px;
  color: #545c63;
}

.aixin {
  margin-right: 40px;
  margin-top: 10px;

  .icon-aixin {
    font-size: 28px;
  }

  .onaixin {
    color: #008B8B;
  }

  .oncollect {
    color: #008B8B;
  }

  .icon-shoucang {
    font-size: 25px;
  }
}

.pinglun {
  margin-top: 10px;

  .icon-pinglun {
    font-size: 25px;
  }
}

.mycomment {
  margin-bottom: 10px;
}


.user_info .content {
  font-size: 17px;
  color: black;
  line-height: 17px;
  margin-bottom: 5px;
}

.user_info .comment_nickname {
  font-size: 13px;
  font-weight: normal;
}

.user_info .comment_time {
  margin-bottom: 25px;
}

.second_comment_nickname {
  font-size: 13px;
  color: #008B8B;
  font-weight: bold;
}
</style>